<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        *{
            outline: none !important;
        }
    </style>
</head>
<body>
    <div class="" id="app">
        <!-- 表格 -->
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>喜好</th>
                    <th>点赞</th>
                    <th>功能</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in members" :key="item._id">
                    <td>{{item._id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.like}}</td>
                    <td>
                        <img :src="item.state?'./images/点赞.png':'./images/点赞 (1).png'" alt="" style="width: 30px;height: 30px;" @click="doState(item._id,item.state)">
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger" @click="doDelete(item._id)">删除</button>
                        <a :href="'./html/add.html?id='+item._id+'&'+item.name+'&'+item.age+'&'+item.like">
                            <button type="button" class="btn btn-success" @click="doUpdate(item._id)">修改</button>
                        </a>
                        
                    </td>
                </tr>
            </tbody>
        </table>
        
        <!-- 添加按钮 -->
        <a href="./html/add.html">
            <button type="button" class="btn btn-warning">添加新成员</button>
        </a>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                members:[]
            },
            mounted() {
                this.request();
            },
            methods: {
                request(){
                    $.ajax({
                    type: "get",
                    url: "http://localhost:8081/members",
                    data: "data",
                    dataType: "json",
                    }).then(res=>{
                        this.members = res;
                        console.log(this.members);
                    });
                },
                doDelete(id){
                    console.log(id);
                    $.ajax({
                    type: "post",
                    url: "http://localhost:8081/delete",
                    data: {
                        id
                    },
                    dataType: "json",
                    })
                    this.request();
                },
                // doUpdate(id){
                //     console.log(id);
                //     $.ajax({
                //     type: "post",
                //     url: "http://localhost:8081/update",
                //     data: {
                //         id
                //     },
                //     dataType: "json",
                //     })
                //     this.request();
                // },
                doState(id,state){
                    $.ajax({
                    type: "post",
                    url: "http://localhost:8081/state",
                    data: {
                        id,
                        state:!state
                    },
                    dataType: "json",
                    })
                    this.request();
                },
            },
        })
    </script>
</body>
</html>